<template>
  <div class="nav">
    <div class="system-name">
        口腔医院挂号
    </div>
    <ul class="nav-item">
        <li v-for="(item,index) in navList" 
        :key="index" 
        @click="pageUrl(item.url,$event,index)" 
        :data-query="item.query"
        :data-restful="item.restful"
        :class="color(index)"
        >
            <i :class="'iconfont '+ (item.icon== undefined || item.icon=='' ? 'icon-shouye' : item.icon)"></i>
            {{ item.name == undefined ? '空菜单栏' : item.name }}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"LeftNav",
    props:['navList','pageRouter'],
    data(){
        return{
            count:0
        }
    },
    methods:{
        pageUrl(url,e,index){
            this.count = index
            if(url == undefined || url == ""){
                url = "/404";
            }

            var query = e.currentTarget.dataset.query;
            var restful = e.currentTarget.dataset.restful;

            // 带参数 不带参
            if(query != undefined){
                //json字符串转对象
                var queryObj = JSON.parse(query);
                this.pageRouter(url,queryObj);
            }else if(restful != undefined){
                var restfulObj = JSON.parse(restful);
                this.pageRouter(url,{},restfulObj);
            }else{
                this.pageRouter(url);
            }
        },
        color(index){
            if(this.count === index){
                return 'active';
            }
        }
    }
}
</script>

<style scoped>
.nav{
    width: 220px;
    /* 可视高度100% */
    height: calc(100vh);
    background-color: #20222A;
}
.system-name{
    width: 100%;
    height: 50px;
    color: rgba(255,255,255,.8);
    line-height: 50px;
    text-align: center;
}
.nav-item{
    list-style: none;
    width: 100%;
}
.nav-item > li{
    width: 200px;
    height: 40px;
    line-height: 40px;
    padding: 8px 10px;
    color: rgba(255,255,255,.7);
    cursor: pointer;
}
.nav-item > li:hover{
    color: #ffffff;
    background-color: #222222;
}
.active{
    color: #ffffff;
    background-color: #31aff1;
}
.nav-item i{
    font-size: 20px;
}
</style>